import React from 'react';
import { TContainerProps } from './Types';
import { V } from './containers';
import { Inter } from './Texts';

export interface TBadgeProps extends TContainerProps {
  /**
   * 标签文本
   */
  text: string;
  /**
   * 标签类型
   */
  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
  /**
   * 标签大小
   */
  size?: 'small' | 'medium' | 'large';
  /**
   * 是否可点击
   */
  clickable?: boolean;
  /**
   * 点击事件
   */
  onPress?: () => void;
}

export function Badge({
  text,
  variant = 'primary',
  size = 'medium',
  clickable = false,
  onPress,
  ...props
}: TBadgeProps) {
  const badgeStyle = getBadgeStyle(variant, size, clickable);
  const textStyle = getTextStyle(variant, size);

  const content = (
    <V {...badgeStyle} {...props}>
      <Inter style={textStyle}>{text}</Inter>
    </V>
  );

  if (clickable && onPress) {
    return (
      <V onPress={onPress} {...props}>
        {content}
      </V>
    );
  }

  return content;
}

function getBadgeStyle(variant: string, size: string, clickable: boolean) {
  const baseStyle = {
    borderRadius: size === 'small' ? 8 : size === 'large' ? 16 : 12,
    paddingHorizontal: size === 'small' ? 6 : size === 'large' ? 12 : 8,
    paddingVertical: size === 'small' ? 2 : size === 'large' ? 6 : 4,
    alignItems: 'center' as const,
    justifyContent: 'center' as const,
  };

  const variantStyles = {
    primary: {
      backgroundColor: '#dbeafe',
    },
    secondary: {
      backgroundColor: '#f1f5f9',
    },
    success: {
      backgroundColor: '#dcfce7',
    },
    warning: {
      backgroundColor: '#fef3c7',
    },
    danger: {
      backgroundColor: '#fee2e2',
    },
    info: {
      backgroundColor: '#e0f2fe',
    },
  };

  const style = {
    ...baseStyle,
    ...variantStyles[variant as keyof typeof variantStyles],
  };

  if (clickable) {
    (style as any).opacity = 0.8;
  }

  return style;
}

function getTextStyle(variant: string, size: string) {
  const baseStyle = {
    fontSize: size === 'small' ? 10 : size === 'large' ? 14 : 12,
    fontWeight: '500' as const,
  };

  const variantStyles = {
    primary: {
      color: '#1d4ed8',
    },
    secondary: {
      color: '#475569',
    },
    success: {
      color: '#16a34a',
    },
    warning: {
      color: '#d97706',
    },
    danger: {
      color: '#dc2626',
    },
    info: {
      color: '#0284c7',
    },
  };

  return {
    ...baseStyle,
    ...variantStyles[variant as keyof typeof variantStyles],
  };
}
